<template>
  <div>
    <van-nav-bar title="标题" />
    <van-form @submit="onSubmit" @file="onFailed">
      <van-field
        v-model.trim="user.mobile"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern: /^1\d{10}$/, message: '手机号不正确' }]"
      />
      <van-field
        v-model.trim="user.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern: /^\d{6}$/, message: '验证码不正确' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <button @click="text">获取用户信息</button>
  </div>
</template>

<script>
import { getProfile } from '../../api/user'

export default {

  name: 'login',
  data () {
    return {
      user: {
        // 手机号
        mobile: '15603328350',
        // 验证码
        code: '246810'
      }

    }
  },
  methods: {
    async doLogin () {
      // 做具体的axios请求
      try {
        this.$toast({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner'
        })
        // const res = await Login(this.user)
        await this.$store.dispatch('getList', this.user)
        await this.$store.dispatch('user/getProfile')
        this.$toast('登陆成功')
        this.$router.push('/')
        // console.log('返回的数据', res)
      } catch (err) {
        console.log(err)
        this.$toast('登陆失败')
      }
    },
    // 当提交的时候会调用doLogin方法
    onSubmit (values) {
      this.doLogin()
    },
    onFailed () { alert('登录失败') },
    text () {
      getProfile()
    }
  }
}
</script>

<style lang="less" scoped>
.van-button--info {
  background-color: rgb(69, 93, 138);
}
</style>
